<template>
	<div class="loading">
		<div class="left">
			<div class="left-after after" :style="{transform:degLeft}"></div>
		</div>
		<div class="right">
			<div class="right-after after" :style="{transform:degRight}"></div>
		</div>
		<div class="progress">
			<div class="title">{{title}}</div>
			<div class="number">{{number}}</div>
		</div>
	</div>
</template>

<script>
    export default {
        name: "ring",
	    props:["title","number","x","y"],
	    computed:{
            degRight:function(){
                const once = 365 / ( parseInt(this.x) + parseInt(this.y) )
	            const result = parseInt(once * this.x)
	            if (result < 181){
	                return `rotateZ(${result}deg)`
	            }else{
	                return `rotateZ(180deg)`
	            }
            },
		    degLeft:function(){
                const once = 365 / ( parseInt(this.x) + parseInt(this.y) )
                const result = parseInt(once * this.x)
                if (result < 180){
                    return `rotateZ(0deg)`
                }else{
                    if (result-180>180){
                        return `rotateZ(180deg)`
                    }else{
                        return `rotateZ(${result-180}deg)`
                    }
                }
            },
	    },
	    methods:{

	    }
    }
</script>

<style scoped lang="less">
	.title{
		margin-top: 1.5rem;
		font-size: 0.75rem;
	}
	.number{
		font-size: 4rem;
	}
	.loading {
		margin: 0 auto;
		width: 16em;
		height: 16em;
		position: relative;
	}

	.loading .progress {
		position: absolute;
		width: 12em;
		height: 12em;
		background-color: white;
		border-radius: 50%;
		left: 2em;
		top: 2em;
		text-align: center;
	}

	.left,
	.right {
		width: 8em;
		height: 16em;
		overflow: hidden;
		position: relative;
		float: left;
		background-color: #369CF0;
	}

	.left {
		border-radius: 16em 0 0 16em;
	}
	.right {
		border-radius: 0 16em 16em 0;
	}

	.after {
		content: "";
		position: absolute;
		display: block;
		width: 8em;
		height: 16em;
		border-radius: 16em 0 0 16em;
		background-color: #CCE8F6;
	}

	.right-after {
		content: "";
		position: absolute;
		display: block;
		border-radius: 0 16em 16em 0;
	}
	.left-after {
		transform-origin: right center;
	}

	.right-after {
		transform-origin: left center;
	}
</style>
